<template>
  <div class="buttons-controller">
    <div class="content-slot" style="display:none;">
      <slot />
    </div>
    <div class="default-show" style="display:flex;">
      <div class="show" style="flex:1" />
      <div class="toggle-button" style="width:30px;line-height:33px;text-align:center;cursor:pointer;" @click="toggle">
        <i class="el-icon-caret-bottom" />
      </div>
    </div>
    <div class="more" style="display:none;" />
  </div>
</template>

<script>
export default {
  props: {
    rowNumber: {
      type: Number,
      default: 19
    }
  },
  data() {
    return {
      size: this.rowNumber
    }
  },
  watch: {
    rowNumber() {
      this.size = this.rowNumber
    },
    size: {
      handler() {
        this.$nextTick(() => {
          this.$('.buttons-controller .default-show .show').html('')
          this.$('.buttons-controller .more').html('')
          const buttons = this.$('.buttons-controller .content-slot').children().clone()
          const shows = buttons.slice(0, this.size)
          const more = buttons.slice(this.size)
          this.$('.buttons-controller .default-show .show').html(shows)
          for (let i = 0; i < more.length; i = i + this.size) {
            const row = this.$('<div class="row" style="margin-top:10px;"></div>')
            row.html(more.slice(i, i + this.size))
            this.$('.buttons-controller .more').append(row)
          }
          if (this._.isEmpty(shows) || this._.isEmpty(more)) {
            this.$('.buttons-controller .default-show .toggle-button').css('display', 'none')
          }
        })
      },
      immediate: true
    }
  },
  methods: {
    toggle() {
      this.$('.buttons-controller .more').toggle(500)
      const icon = this.$('.buttons-controller .default-show .toggle-button').find('i')
      icon.attr('class') === 'el-icon-caret-top' ? icon.attr('class', 'el-icon-caret-bottom') : icon.attr('class', 'el-icon-caret-top')
    }
  }
}
</script>
